<template>
	<div>
		<div>
			<el-button @click="addDialog = true">添加影视剧</el-button>
			<el-input :input-style="{ width: '200px', marginLeft: '20px' }" v-model="tableData.search" placeholder="请输入内容" />
			<el-button class="ml-[50px]" @click="loadData">搜索</el-button>
		</div>
		<el-table :data="tableData.records">
			<el-table-column prop="name" label="电影名" width="120" fixed="left" />
			<el-table-column prop="sort" label="影视类型" width="80">
				<template #default="scope">
					<el-tag type="success">{{ scope.row.sort === 1 ? "电影" : "电视剧" }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="country" label="国家" width="80" />
			<el-table-column prop="year" label="发布年份" width="120" />
			<el-table-column prop="score" label="评分" width="80" />
			<!--			<el-table-column prop="description" label="简介" width="120" />-->
			<!--			<el-table-column prop="hot" label="热度" width="80" />-->
			<!--			<el-table-column prop="time" label="时长" width="120" />-->
			<el-table-column prop="peopleCount" label="参与评分人数" width="80" />
			<!--			<el-table-column prop="moveCount" label="电视剧集数" width="120" />-->
			<el-table-column prop="imdb" label="IMDB评分" width="120" />
			<el-table-column prop="douban" label="豆瓣评分" width="120" />
			<!--			<el-table-column prop="lanfanqie" label="烂番茄评分" width="120" />-->
			<el-table-column prop="posterAddress" label="海报" width="120">
				<template #default="scope">
					<el-image :src="scope.row.posterAddress" alt="" fit="fill" style="width: 100px; height: 100px" />
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="220" />
			<el-table-column label="操作" width="150" fixed="right">
				<template #default="scope">
					<el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
					<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="修改"
			width="40%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="影视剧名称">
					<el-input v-model="formData.name" />
				</el-form-item>

				<el-form-item label="演员">
					<el-select v-model="formData.actorList" multiple collapse-tags placeholder="请选择" style="width: 240px">
						<el-option v-for="item in actorList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="影视剧标签">
					<el-select v-model="formData.tagList" multiple placeholder="请选择" style="width: 240px">
						<el-option v-for="(item, index) in tagList" :key="index" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="影视剧类型">
					<el-select v-model="formData.sort" placeholder="Select" size="large">
						<el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="国家">
					<el-input v-model="formData.country" />
				</el-form-item>
				<el-form-item label="发布年份">
					<el-date-picker v-model="formData.year" type="year" placeholder="选择年份" />
				</el-form-item>
				<el-form-item label="评分">
					<el-input v-model="formData.score" type="number" />
				</el-form-item>
				<el-form-item label="简介">
					<el-input v-model="formData.description" type="textarea" />
				</el-form-item>
				<!--				<el-form-item label="热度">-->
				<!--					<el-input v-model="formData.hot" type="number" />-->
				<!--				</el-form-item>-->
				<!--				<el-form-item label="时长" v-show="formData.sort === 1">-->
				<!--					<el-input v-model="formData.time" type="number" />-->
				<!--				</el-form-item>-->
				<!--				<el-form-item label="电视剧集数" v-show="formData.sort === 2">-->
				<!--					<el-input v-model="formData.moveCount" type="number" />-->
				<!--				</el-form-item>-->
				<el-form-item label="参与评分人数">
					<el-input v-model="formData.people" type="number" />
				</el-form-item>
				<el-form-item label="IMDB评分">
					<el-input v-model="formData.IMDB" type="number" />
				</el-form-item>
				<el-form-item label="豆瓣评分">
					<el-input v-model="formData.douban" type="number" />
				</el-form-item>
				<!--				<el-form-item label="烂番茄评分">-->
				<!--					<el-input v-model="formData.lanfanqie" type="number" />-->
				<!--				</el-form-item>-->
				<el-form-item label="海报">
					<el-upload
						v-model:file-list="uploadList"
						:action="uploadUrl"
						:headers="{ token }"
						list-type="picture-card"
						:on-success="uploadSuccess"
						:limit="1"
					>
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="edit">更新</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="影视剧名称">
					<el-input v-model="formData.name" />
				</el-form-item>

				<el-form-item label="演员">
					<el-select v-model="formData.actorList" multiple collapse-tags placeholder="请选择" style="width: 240px">
						<el-option v-for="item in actorList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="影视剧标签">
					<el-select v-model="formData.tagList" multiple placeholder="请选择" style="width: 240px">
						<el-option v-for="(item, index) in tagList" :key="index" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="影视剧类型">
					<el-select v-model="formData.sort" placeholder="Select" size="large">
						<el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="国家">
					<el-input v-model="formData.country" />
				</el-form-item>
				<el-form-item label="发布年份">
					<el-date-picker v-model="formData.year" type="year" placeholder="选择年份" />
				</el-form-item>
<!--				<el-form-item label="评分">-->
<!--					<el-input v-model="formData.score" type="number" />-->
<!--				</el-form-item>-->
				<el-form-item label="简介">
					<el-input v-model="formData.description" type="textarea" />
				</el-form-item>
				<!--				<el-form-item label="热度">-->
				<!--					<el-input v-model="formData.hot" type="number" />-->
				<!--				</el-form-item>-->
<!--				<el-form-item label="时长" v-show="formData.sort === 1">-->
<!--					<el-input v-model="formData.time" type="number" />-->
<!--				</el-form-item>-->
				<!--				<el-form-item label="电视剧集数" v-show="formData.sort === 2">-->
				<!--					<el-input v-model="formData.moveCount" type="number" />-->
				<!--				</el-form-item>-->
<!--				<el-form-item label="参与评分人数">-->
<!--					<el-input v-model="formData.people" type="number" />-->
<!--				</el-form-item>-->
				<el-form-item label="IMDB评分">
					<el-input v-model="formData.imdb" type="number" />
				</el-form-item>
				<el-form-item label="豆瓣评分">
					<el-input v-model="formData.douban" type="number" />
				</el-form-item>
				<!--				<el-form-item label="烂番茄评分">-->
				<!--					<el-input v-model="formData.lanfanqie" type="number" />-->
				<!--				</el-form-item>-->
				<el-form-item label="海报">
					<el-upload
						v-model:file-list="uploadList"
						:action="uploadUrl"
						:headers="{ token }"
						list-type="picture-card"
						:on-success="uploadSuccess"
						:limit="1"
					>
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">新增</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref, computed } from "vue";
import { useUserStore } from "@/stores/userStores";
import { deletedMove, getMoveById, getMovePage, saveMove, updateMove } from "@/api/move";
import { Plus } from "@element-plus/icons-vue";
import { getTagList } from "@/api/tag";
import { getActorList } from "@/api/actor";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
	search: "",
});

const tagList = ref([]);
const actorList = ref([]);

const formData = ref({});

const uploadList = ref([]);
const uploadUrl = import.meta.env.VITE_BASE_URL + "/file/upload";

const sortOptions = [
	{ value: 1, label: "电影" },
	{ value: 2, label: "电视剧" },
];
const userStore = useUserStore();
const token = userStore.token;
const editDialog = ref(false);
const addDialog = ref(false);

const openEdit = async (id) => {
	const res = await getMoveById(id);
	if (res.success) {
		formData.value = res.data;
		formData.value.tagList = res.data.tagList.map((item) => item.id);
		formData.value.actorList = res.data.actorList.map((item) => item.id);
		if (res.data.posterAddress) {
			uploadList.value.push({ url: res.data.posterAddress });
		}
		editDialog.value = true;
	} else {
		ElMessage.error(res.msg);
	}
};
const edit = async () => {
	const res = await updateMove(formData.value);
	if (res.success) {
		ElMessage.success("修改成功");
	} else {
		ElMessage.error(res.msg);
	}
	editDialog.value = false;
	resetForm();
	loadData();
};

const add = async () => {
	const res = await saveMove(formData.value);
	if (res.success) {
		ElMessage.success("添加成功");
	} else {
		ElMessage.error(res.msg);
	}
	addDialog.value = false;
	resetForm();
	loadData();
};
const deleted = async (id) => {
	ElMessageBox.confirm("确认要删除该电影?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedMove(id);
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		loadData();
	});
};
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	formData.value = {
		posterAddress: "",
	};
	uploadList.value = [];
};

const loadData = async () => {
	const res = await getMovePage({
		page: tableData.page,
		size: tableData.size,
		keyWord: tableData.search,
	});
	if (res.success) {
		tableData.records = res.data.list;
		tableData.page = res.data.pageNum;
		tableData.pages = res.data.pages;
	}
};

const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.success) {
		formData.value.posterAddress = response.data;
	}
};

onMounted(() => {
	loadData();
	getTagList().then((res) => {
		if (res.success) {
			tagList.value = res.data.map((e) => {
				return {
					value: e.id,
					label: e.tagName,
				};
			});
		}
	});
	getActorList().then((res) => {
		if (res.success) {
			actorList.value = res.data.map((e) => {
				return {
					value: e.id,
					label: e.name,
				};
			});
		}
	});
});
</script>

<style scoped></style>
